import 'package:flutter/material.dart';
import 'package:hx_demo_example/data/service_data.dart';
import 'package:hx_demo_example/message_model/em_message.dart';

import 'package:provider/provider.dart';

import '../components/customer_service_components.dart';
import '../data/customer_service_provider.dart';

class ChatPage extends StatefulWidget {


  const ChatPage({super.key});


  @override
  State<StatefulWidget> createState() {
    return _ChatPageState();
  }
}

class _ChatPageState extends State<ChatPage>{


  late CustomerServicePageProvider pvd;




  @override
  void initState() {
    super.initState();

    pvd = CustomerServicePageProvider();

    pvd.state.textFieldNode.addListener((){
      if (pvd.state.textFieldNode.hasFocus) {
        pvd.changeKeyBoard(false,cancelKeyBode: true);
      }else{
        pvd.changeKeyBoard(true,cancelKeyBode: true);
      }
    });

    ///监听回调消息
    pvd.listenerEvent();

    ChatService.getMessages(msgId: "").then((value) {
      pvd.upDataMessage(value);
    });
  }



  @override
  Widget build(BuildContext context) {
    return MultiProvider(providers: [
      ChangeNotifierProvider(create:  (ctx)=>pvd)
    ],
      child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            title: const Text("客服消息",style: TextStyle(color: Colors.black),),
            backgroundColor: Colors.white,
            iconTheme: const IconThemeData(
              color: Colors.black, //修改颜色
            ),
          ),
          body: _body()
      ),
    );
  }
  Widget _body() {

    return Consumer<CustomerServicePageProvider>(builder: (_,messageProvider,child){
      return Column(children: <Widget>[

        ///消息内容
        Expanded(
            child: InkWell(
              onTap: pvd.changeTools,
              child: _messageListView(),
            )),


        ///keyboardBar-widget
        ChatWidgets.keyboardBar(
            bottomPadding: pvd.paddingHeight(),
            enterWidget: _enterWidget(),
            isShowSend: pvd.state.isShowSend,
            isShowTools: pvd.state.isShowTools,
            sendTap:(){
              if (pvd.state.textEditController.text.isEmpty)  return;
              pvd.sendMessage();
            },
            showToolTap: (){
              pvd.changeTools(
                  showTool:!pvd.state.isShowTools,
                  isKeyBody: pvd.state.isShowTools);
            }
        ),

        ///tools - item - widget
        (pvd.state.isShowTools) ? SizedBox(
          height: 210,
          child: _bottomWidget(),
        )
            : const SizedBox(height: 0,)


      ]);
    });
  }


  Widget _messageListView() {
    return Container(
        color: const Color(0xffF1F1F1),
        child:Column(
          children: [
            Flexible(child: ListView.builder(
                itemBuilder: (BuildContext context, int index) {
                  return _messageListViewItem(pvd.state.messages[index],(index == pvd.state.messages.length - 1) ? null :pvd.state.messages[index + 1]);
                },
                reverse: true,
                shrinkWrap: true,
                controller: pvd.state.scrollController,
                itemCount: pvd.state.messages.length))
          ],
        ));
  }

  Widget _messageListViewItem(EMMessage? entity,EMMessage? nextEntity) {

    return ChatItemWidgets.buildChatListItem(entity, nextEntity,
        onResend: (reSendEntity) {

        }, onItemClick: (onClickEntity) async {

        });
  }


  ///*输入框*/
  Widget _enterWidget() {
    return  ChatWidgets.enterWidget(
        focusNode: pvd.state.textFieldNode,
        controller: pvd.state.textEditController,
        textFieldHeight: pvd.state.textFieldHeight,
        onChanged:(str) {
          pvd.changeSendBtn(str.isNotEmpty);
          pvd.changeTextFieldHeight(str,context: context);
        },
        onEditingComplete:() {
          pvd.sendMessage();
        }
    );
  }

  ///ToolsWidget
  Widget _bottomWidget() {
    if (pvd.state.isShowTools) {
      return ChatWidgets.toolsSwiper(
          pvd.state.toolsData,
          toolsList: pvd.state.gridToolsList,tap: (name){
        print(name);
      });
    }
    return Container();
  }
}

